<template>
  <div class="search">
    <div class="search_head">
      <div class="input" @click='tosearchitem'>
        <span><img src="../assets/img/BL.png" alt="" /></span>
        <span>创作吧！少年校园特辑</span>
      </div>
    </div>
    <div class="banner" v-if="bannerlist">
      <van-swipe @change="onChange" autoplay="3000">
        <van-swipe-item
          v-for="item in bannerlist"
          :key="item.id"
        >
          <div class="banner_img">
            <img :src="item.cover" alt="" />
            <p>{{ item.title }}</p>
          </div>
        </van-swipe-item>
        <template #indicator>
          <div class="custom-indicator">
            <span> {{ current + 1 }}</span
            >/{{ bannerlistlength }}
          </div>
        </template>
      </van-swipe>
    </div>

    <div class="work">
         <div class="work_head">
             <span class="left">作品</span>
             <span class="right">全部作品</span>
         </div>
         <div class="work_content">
            <div class="img" v-for="item in searchcontent" :key="item.id">
                <img :src="item.cover" alt="" @click="toSearchlist(item.id)">
                <p>{{item.category_name}}</p>
            </div>
         </div>
    </div>
     <tab-bar></tab-bar>
  </div>
</template>

<script>
import tabBar from "../components/tabBar.vue";
import { getSearch } from "../api/search";
export default {
  data() {
    return {
      current: 1,
      bannerlist:null,
      bannerlistlength:null,
      searchHome:null,
      searchcontent:null,
    };
  },
  components:{
    tabBar,
  },
  methods: {
    onChange(index) {
      this.current = index;
    },
    toSearchlist(id){
       this.$router.push({path:'/searchlist',query:{id:id}})
    },
    tosearchitem(){
        this.$router.push({path:'/searchitem'})
    },
    getSearchFun(){
           getSearch().then(data=>{
             this.searchHome=data.data
             this.bannerlist=this.searchHome.banners
             this.bannerlistlength=this.bannerlist.length
             this.searchcontent=this.searchHome.categories
           })
    }
  },
  created() {
      this.getSearchFun()
  },
};
</script>

<style lang="less" scoped>
.search {
    background-color: #fff;
  .search_head {
    background-color: #fff;
    padding: 5px 20px;
    width: 100%;
    position: fixed;
    box-sizing: border-box;
    z-index: 99;
    top: 0px;

    .input {
      width: 90%;
      margin: 10px auto;
      display: flex;
      align-items: center;
      padding: 5px 10px;
      border-radius: 7px;
      background-color: #f2f2f2;
      color: gray;
      span {
        display: block;
        font-size: 10px;
        img {
          width: 16px;
          display: block;
          margin-right: 20px;
        }
      }
    }
  }
  .banner {
    width: 95%;
    margin: 0px auto;
    margin-top: 60px;

   
    .banner_img {
      width: 100%;
      position: relative;
      img {
        width: 100%;
        display: block;
      }
      p {
        position: absolute;
        bottom: 10px;
        left: 8px;
        color: #fff;
      }
    }
    .custom-indicator {
      position: absolute;
      right: 5px;
      bottom: 5px;
      padding: 2px 5px;
      font-size: 12px;
      color: #fff;
      span {
        font-size: 20px;
        font-weight: 500;
      }
    }
  }
  .work{
    width: 95%;
    margin: 0 auto;
   padding-top: 20px;
    background-color: #fff;
    .work_head{
        display: flex;
        padding: 15px 0px;
        justify-content: space-between;
        span.left{
            font-size: 16px;
            font-weight: 700;
        }
        span.right{
            font-size: 12px;
            color: rgb(244, 41, 41);
        }
    }
    .work_content{
         display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            margin-bottom: 50px;
        .img{
            position: relative;
            border-radius: 8px;
            overflow: hidden;
            margin-bottom: 20px;
            width: 47%;
            img{
                width: 100%;
                height: 120px;
            }
            p{
                position: absolute;
                top: 10px;
                left: 10px;
                z-index: 5;
                color: white;
                font-size: 14px;
            }
        }
    }
  }
}
</style>